<template>
 <!--弹窗-->
 <el-dialog :title="title" :visible.sync="visible" :before-close="handleClose"
width="500px">
 <el-form
 :rules="rules"
 ref="formData"
 :model="formData"
 label-width="100px"
 style="width: 400px;"
 status-icon >
 <el-form-item label="用户名：" prop="username">
 <el-input v-model="formData.username" maxlength="50"></el-input>
 </el-form-item>
 <el-form-item label="昵称：" prop="nickName">
 <el-input v-model="formData.nickName" maxlength="50"></el-input>
 </el-form-item>
 <el-form-item label="手机号：" prop="mobile">
 <el-input v-model="formData.mobile" maxlength="11">
 </el-input>
 </el-form-item>
 <el-form-item label="邮箱：" prop="email">
 <el-input v-model="formData.email" >
 </el-input>
 </el-form-item>
 <el-form-item label="帐号过期：" prop="isAccountNonExpired">
 <el-radio-group v-model="formData.isAccountNonExpired">
 <el-radio :label="1" border>未过期</el-radio>
 <el-radio :label="0" border>已过期</el-radio>
 </el-radio-group>
 </el-form-item>
 <el-form-item label="密码过期：" prop="isCredentialsNonExpired">
 <el-radio-group v-model="formData.isCredentialsNonExpired">
 <el-radio :label="1" border>未过期</el-radio>
 <el-radio :label="0" border>已过期</el-radio>
 </el-radio-group>
 </el-form-item>
 <el-form-item label="帐号锁定：" prop="isAccountNonLocked">
 <el-radio-group v-model="formData.isAccountNonLocked" >
 <el-radio :label="1" border>未锁定</el-radio>
 <el-radio :label="0" border>已锁定</el-radio>
 </el-radio-group>
 </el-form-item>
 <el-form-item align="right">
 <el-button size="mini" @click="handleClose">取 消</el-button>
 <el-button size="mini" type="primary" @click="submitForm('formData')">确 定
</el-button>
 </el-form-item>
 </el-form>
 </el-dialog>
</template>

<script>
export default {
  data() {
   return {
    // 校验表单
               rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 6, max: 30, message: '长度在 6 到 30 个字符', trigger: 'blur'}
                    ],

                    nickName: [
                        {required: true, message: '请输入昵称', trigger: 'blur'}
                    ],

                    mobile: [
                        {required: true, message: '请输入手机号', trigger: 'blur'}
                    ],

                   isAccountNonExpired: [
                       {required: true, message: '请选择', trigger: 'change'}
                   ],

                   isCredentialsNonExpired: [
                       {required: true, message: '请选择', trigger: 'change'}
                   ],

                   isAccountNonLocked: [
                       {required: true, message: '请选择', trigger: 'change'}
                   ]
               }


   }
   },
 // 接收父组件传递的属性
 props: {
 visible: { //弹出隐藏
 type: Boolean,
 default: false
 },
 title: { // 标题
 type: String,
 default: ''
 },
 formData: { // 表单数据
 type: Object,
 default: {}
 },
 remoteClose: Function // 用于关闭窗口
 },
 methods: {
  // 关闭弹窗
  handleClose(done) {
  // 表单清空
  this.$refs['formData'].resetFields()
  // 因为 visible 是父组件的属性，所以要让父组件去改变值
  this.remoteClose()
  },
 //提交表单
 submitForm(formName) {

 },
 // 异步方法提交数据
  async submitData() {
  let response = null
  // 有 id 值则修改，没有id则新增
  if(this.formData.id) {
  response = await api.update(this.formData)
  }else {
  // 默认密码与用户名一致
  this.formData.password = this.formData.username
  response = await api.add(this.formData)
  }
  // 等上面返回数据response后再进行处理
  if (response.code === 20000) {
  // 提交成功, 关闭窗口, 刷新列表
  this.$message({
  message: '保存成功',
  type: 'success'
  })
  // 关闭窗口
  this.handleClose()
  } else {
  this.$message({
  type: 'error',
  message: "保存失败"
  });
  }
  },
 }
 }
</script>

<style>
</style>
